# ============================================
# 知识点
# 事件
# 达到某个事先设定的条件自动触发的动作(onclick)
# #绑定事件的两种方式
# <button onclick=" func1()">点我</button>
# <button id="d1"> 点我</button>
# <script>
# //第一种绑定事件的方式
# function func1() {
# alert(111)
# //第二种
# let btnEle = document . getElementById('d1');
# btnEle.onclick = function ( ) {
# alert(222)
# </ script>

# script标签既可以放在head内也可以放在body内
# 但是通常情况下都是放在body内的最底部

#等待浏览器窗口加载完毕之后再执行代码(了解onload)
# window. onload = function () {
# //第一种绑定事件的方式
# function func1() {
# alert(111 )
# //第二种
# let btnEle = document. getElementById('d1');
# btnEle.onclick = function () {
# alert (222 )
# }
# }
# ============================================
# 开关灯                                                   (onclick 点击)
# 原生js事件绑定
# 我们直接写几个案例，看懂即可
# ●开关灯案例
# <div id="d1" class="c1 bg_ red bg_ green"></div>
# <button id= "d2">变色</button>
# <script>
# let btnEle = document . getElementById( 'd2')
# let divEle = document . getElementById( 'd1' )
# btnEle. onclick = function () { // 点击事件
# //动态的修改div标签的类属性
# divEle.classList. toggle('bg_ red' )
# </script>
# ============================================
# input框获取焦点失去焦点案例                           (onfocus 获取焦点 onblur失去焦点)
# <input type= "text" value="老板去吗?”id="d1">
# <script>
# let iEle = document . getElementById('d1' )
# //获取焦点事件
# iEle.onfocus = function () {
# //将input框内部值去除
# iEle. value = ''
# //点value就是获取
# 等号赋值就是设置
# }
# //失去焦点事件
# iEle. onblur = function () {
# //给input标签重写赋值
# iEle.value = '没钱不去!’
# }
# </script>
# ============================================
# 定时器      
# <input type="text" id="d1" style="display: block;height: 50px;width:200px">
# <button id="d2">开始</button>
# <button id=" d3">结束</button>

# <script>
# //先定义一个全局存储定时器的变量
# let t = null
# let inputEle = document . getElementById('dl')
# let startBtnEle = document . getElementById('d2' )
# let endBtnEle = document . getEl ementById( 'd3')
# // 1访问页面之后将访问的时间展示到input框中
# // 2动态展示当前时间
# // 3页面上加两个按钮一个开始一个结束
# function showTime( ) {
# let currentTime = new Date( ) ;
# inputEle.value = currentTime . toLocaleString()
# startBtnEle.onclick = function () {
# //限制定时器只能开一个
# if(!t){
# t = setInterval(showTime,1000) //每点击一次就会开设一个定时
# 器而t只指代最后-一个
# endBtnEle.onclick = function () {
# clearInterval(t)
# //还应该将t重置为空
# t = null
# </script>
# ============================================
# <script>                                             (onchange 选择时，多用于select)
# Let proELe = document . getELementById('d1')
# Let cityELe = document . getELementById('d2')
# //先模拟省市数据
# data = {
# "河北": ["廊坊"， "邯郸"，'唐山']，
# "北京": ["朝阳区", "海淀区"，'昌平区']，
# "山东": ["威海市"， "烟台市"，'临沂市' ],
# 上海:['浦东新区',静安区','黄浦区']，
# '深圳':['南山区'，'宝安区'，'福田区']
# };

# //选for循环获取省
# for(Let key in data){
# //将省信息做成一 个个option标签添加到第一 个select框中
# // 1创建option标签
# Let opELe = document. createELement( ' option' )
# // 2设置文本
# opELe. innerText = key
# // 3设置vaLue
# opELe.value = key // <option vaLue="省 ">省</ option>
# // 4将创建好的option标签添加到第-个select中
# proELe . appendChild(opELe)
# }


# //文本域变化事件change事件
# proELe.onchange = function() {
# //先获取到用户选择的省
# Let currentPro = proEle.value 
# //获取对应的市信息
# Let currentCityList = data [currentPro]
# //清空市seLect中所有的option
# cityELe . innerHTML = ' '
# //自己加一个请选择
# Let ss = "<option disabLed selected>请选择</option>"
# // Let oppELe = document . createELement( ' option' )
# // oppELe. innerText = '请选择'
# // oppELe . setAttribute(' seLected' , ' selected ' )
# cityELe. innerHTML'= ss
# // for循环所有的市渲染到第二个select中
# for (Let i=0;i<currentCityList.Length;i++){
# Let currentCity = currentCityList[i]
# // 1创建option标签
# Let opELe = document . createELement(' option ' )
# // 2设置文本
# opELe . innerText = currentCity
# // 3设置vaLue
# opELe.value = currentCity // <option vaLue="省 ">省</option>
# // 4将创建好的option标签添加到第个select中
# cityELe . appendChild(opELe) 
# }
# ============================================